<template>
    <div class="login-page">
        <div class="login-form">
            <div class="form">
                <div class="text" style="margin-bottom:10px">
                    {{type != 'success' ? '修改密码' : '密码修改成功'}}
                </div>
                <div class="sub-text" v-if="type=='edit'">
                    当前密码为初始密码，请修改密码后使用本系统！
                </div>

                <div class="sub-text">
                    {{type != 'success' ? '新密码需为6至16位，至少包含英文字母、数字和符号中的两种' : '密码修改成功，请返回登录画面进行登录。'}}
                    <div v-if="type=='success'" style="margin-top:10px">
                        <el-button type="primary" size="small" @click="toLogin">返回登录</el-button>
                    </div>
                </div>
                <el-form
                        v-if="type!='success'"
                        label-width="0px"
                        :model="passwordForm"
                        style="margin-top:20px"
                        :rules="rules"
                        ref="passwordForm">

                    <el-form-item label="" prop="password">
                        <el-input v-model="passwordForm.password"  type="password" placeholder="新密码" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="checkPassword">
                        <el-input v-model="passwordForm.checkPassword"  type="password" placeholder="确认密码" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="submitPassWord" :loading="btnLoading">确定修改</el-button>
                        <el-link type="info" style="margin-left:10px;line-height: 20px" @click="toLogin">登录</el-link>
                    </el-form-item>
                </el-form>
            </div>
            <div class="bg-img">
                <img src="../static/img/bgimgG.png"/>
            </div>
        </div>
        <login-bottom></login-bottom>
    </div>
</template>

<script>
    import {validatePassWord} from '@/utils/validate';
    import loginBottom from '@/components/loginBottom';
  export default {
    name: 'editPassword',
    components: { loginBottom },
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value === 'SolarPV123'){
                callback(new Error('新密码不可设置为与系统初始密码相同！'));
            } else if (!validatePassWord(value)){
                callback(new Error('输入密码不合法！'));
            } else {
                if (this.passwordForm.checkPassword !== '') {
                    this.$refs.passwordForm.validateField('checkPassword');
                }
                callback();
            }
        };
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.passwordForm.password) {
                callback(new Error('两次输入的密码不一致，请重新输入！'));
            } else {
                callback();
            }
        };
      return {
          passwordForm:{
              password:'',
              checkPassword:''
          },
          rules:{
              password: [
                  { validator: validatePass, trigger: 'blur' }
              ],
              checkPassword: [
                  { validator: validatePass2, trigger: 'blur' }
              ],

          },

          btnLoading:false,
          type:''

      }
    },
    methods: {
        //去登录页
        toLogin(){
            this.$router.push({name:"login"});
        },

        submitPassWord(){
            this.btnLoading = true;
            this.$refs['passwordForm'].validate((valid) => {
                console.log("valid",valid)
                if (valid) {
                    this.btnLoading = true;
                    //todo 调用修改密码
                    this.type = 'success'

                }
            });
        },
    },
    created() {
        this.type = this.$route.params.type;


    }
  }
</script>
<style lang="less">

</style>


